<template>
  <div :class="{'fixed-show':useClass == 'fixed-show'}" class="cate-nav width_1200_auto">
    <div :class="{'background-white':useClass == 'background-white'}" class="nav-con">
      <div
          class="all-categories hover-pointer"
          @mouseenter="showFirstLists"
          @mouseleave="showFirstList = false"
      >
        {{ $t('commodity.sort') }}
      </div>
      <ul v-if="showNavBar" class="nav-item ">
        <li
            v-for="(item, index) in navList.list"
            :key="index"
            class="nav-lis flex flex-a-c flex-j-c"
            @click="linkTo(item.url)"
        >
          {{ getCEText(item) }}
          <div v-if="index !== navList.list.length - 1" class="colum"></div>
        </li>
      </ul>
    </div>
    <!-- 全部商品分類 -->
    <div
        v-show="showAlways || showFirstList"
        :style="{'top':!showNavBar ?'60px':'46px'}"
        class="cate-list"
        @mouseenter="showFirstList = true"
        @mouseleave="showFirstList = false"
    >
      <!-- 第一级分類 -->
      <div
          :class="{ 'large-nav': large, 'opacity-nav': opacity }"
          class="nav-side"
          @mouseleave="panel = false"
      >
        <ul>
          <li
              v-for="(item, index) in cateList"
              :key="index"
              @mouseenter="showDetail(index)"
          >
            <span class="nav-side-item" @click="goGoodsList(item.id)">{{
                getCEText(item)
              }}</span>
            <span v-for="(second, secIndex) in item.children" :key="secIndex">
              <span v-if="secIndex < 2"> / </span>
              <span
                  v-if="secIndex < 2"
                  class="nav-side-item"
                  @click="goGoodsList(second.id, second.parentId)"
              >{{ getCEText(second) }}</span
              >
            </span>
          </li>
        </ul>
      </div>
      <!-- 展开分類 -->
      <div
          v-show="panel"
          :style="{ minHeight: large ? '470px' : '340px' }"
          class="detail-item-panel"
          @mouseenter="panel = true"
          @mouseleave="panel = false"
      >
        <div class="nav-detail-item">
          <template v-for="(item,index) in panelData">
            <span
                v-if="index < 8"
                :key="index"
                @click="goGoodsList(item.id,item.parentId)"
            >{{ getCEText(item) }}<Icon type="ios-arrow-forward"
            /></span>
          </template>
        </div>
        <ul>
          <li
              v-for="(items, index) in panelData"
              :key="index"
              class="detail-item-row"
          >
            <span
                class="detail-item-title"
                @click="goGoodsList(items.id, items.parentId)"
            >
              {{ getCEText(items) }} <Icon type="ios-arrow-forward"/>
              <span class="glyphicon glyphicon-menu-right"></span>
            </span>
            <div>
              <span
                  v-for="(item, subIndex) in items.children"
                  :key="subIndex"
                  class="detail-item"
                  @click="goGoodsList(item.id, items.id, items.parentId)"
              >{{ getCEText(item) }}</span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {getCategory} from "@/api/goods";
import storage from "@/plugins/storage.js";
import i18n from "@/lang";


export default {
  i18n,
  name: "GoodsListNav",
  props: {
    showAlways: {
      // 总是显示下拉分類
      default: false,
      type: Boolean,
    },
    showNavBar: {
      // 显示全部商品分類右侧导航條
      default: true,
      type: Boolean,
    },
    hover: {
      default: false,
      type: Boolean,
    },
    large: {
      // 是否更高的高度
      default: false,
      type: Boolean,
    },
    opacity: {
      // 是否背景透明
      default: false,
      type: Boolean,
    },
    useClass: {
      type: null,
      default: ''
    }
  },
  data() {
    return {
      panel: false, // 二级分類展示
      panelData: [], // 二级分類數据
      showFirstList: false, // 始终展示一级列表
      cateList: [], // 商品分類
    };
  },
  computed: {
    navList() {
      // 导航列表
      if (storage.getItem("navList")) {
        return JSON.parse(storage.getItem("navList"));
      } else {
        return [];
      }
    },
  },
  methods: {
    showFirstLists() {
      this.showFirstList = true;
      if (
          localStorage.getItem("category") &&
          localStorage.getItem("category_expiration_time")
      ) {
        // this.getCate();
        // 如果缓存过期，则获取最新的信息
        if (new Date() > localStorage.getItem("category_expiration_time")) {
          this.getCate();
          return;
        }
        this.cateList = JSON.parse(localStorage.getItem("category"));
        // this.$Message.info(cateList)
      }
    },
    getCEText(obj, filed) {
      if (typeof obj !== 'object') {
        return '';
      }
      if (this.$i18n.locale=== 'en') {
        return obj.ename;
      }
      return obj.name;
    },
    getCate() {
      // 获取分類數据
      if (this.hover) return false;
      getCategory(0).then((res) => {
        if (res.success) {
          this.cateList = res.result;
          console.log(this.cateList)
          this.$store.commit("SET_CATEGORY", res.result);
          // 过期時間
          var expirationTime = new Date().setHours(new Date().getHours() + 1);
          // 存放过期時間
          localStorage.setItem("category_expiration_time", expirationTime);
          // 存放分類信息
          localStorage.setItem("category", JSON.stringify(res.result));
        }
      });
    },
    showDetail(index) {
      // 展示全部分類
      this.panel = true;
      this.panelData = this.cateList[index].children;
    },
    goGoodsList(id, secondId, firstId) {
      // 分類共有三级，傳全部分類过去
      const arr = [firstId, secondId, id];
      if (!arr[1]) {
        arr.splice(0, 2);
      }
      if (!arr[0]) {
        arr.shift();
      }
      this.$router.push({
        path: "/goodsList",
        query: { categoryId: arr.toString() },
      });
    },
  },
  mounted() {
    if (
        localStorage.getItem("category") &&
        localStorage.getItem("category_expiration_time")
    ) {
      // 如果缓存过期，则获取最新的信息
      if (new Date() > localStorage.getItem("category_expiration_time")) {
        this.getCate();
        return;
      }
      this.cateList = JSON.parse(localStorage.getItem("category"));
    } else {
      this.getCate();
    }
  },
};

</script>
<!--<script id=“__ada” data-handle="rboot" src=“https://static.ada.support/embed2.js”> </script >-->


<style lang="scss" scoped>
.background-white {
  background: #fff;
}

.nav-lis:hover {
  color: $theme_color !important;
  cursor: pointer;

}

.nav-lis {
  width: 103px;
  text-align: center;
  position: relative;
}

.fixed-show {
  margin-top: 0 !important;

  > .nav-con {
    > .all-categories {
      align-items: center !important;
      height: 60px;
      display: inherit;
      justify-content: center;
      padding: 0 !important;
    }
  }
}

.colum {
  height: 14.7px;
  opacity: 1;
  border: 0.7px solid #CBC8C8;
  position: absolute;
  right: 0;
}

.cate-nav {
  position: relative;
  margin: 14px auto 0 auto;
}

/** 商品分類 */
.nav-con {
  height: 46px;
  margin: 0 auto;
  display: flex;

  .all-categories {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 37.4px;
    background: #FFFFFF;
    width: 263.2px;
    padding-top: 15.4px;
    line-height: 20px;
    border-bottom: none;
    font-size: 16.8px;
    font-weight: normal;
    color: #333333;
    letter-spacing: 0px;
  }

  .nav-item {
    width: 914px;
    height: 46px;
    border-radius: 10px;
    background: #FFFFFF;
    margin-left: 10px;
    line-height: 46px;
    overflow: hidden;
    list-style: none;
    // background-color: #eee;
    display: flex;

    li {
      float: left;
      font-size: 17px;
      font-weight: normal;
      color: #333333;


      &:hover {
        color: $theme_color;
      }
    }
  }
}

// 分類列表
.cate-list {
  margin: 0 auto;
  position: absolute;

  z-index: 1000;
}

.nav-side {
  width: 263.2px;
  color: #666;
  float: left;
  overflow: hidden;

  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
  height: 340px;
  ////自動移滚動條样式
  //&::-webkit-scrollbar {
  //  width: 1px;
  //  height: 5px;
  //}
  //&::-webkit-scrollbar-thumb {
  //  border-radius: 1em;
  //  background-color: rgba(50, 50, 50, 0.3);
  //}
  //&::-webkit-scrollbar-track {
  //  border-radius: 1em;
  //  background-color: rgba(50, 50, 50, 0.1);
  //}
}

.large-nav {
  height: 470px;

  ul > li {
    line-height: 20px;
  }
}

.opacity-nav {
  background-color: rgba(0, 0, 0, 0.5);
}

.nav-side ul {
  width: 100%;
  list-style: none;
}

.nav-side li {
  padding: 0 0 16.2px 37.4px;
  font-size: 13px;
  line-height: 18px;
}

.nav-side-item:hover {
  cursor: pointer;
  color: $theme_color;
}

/*显示商品詳細信息*/
.detail-item-panel {
  width: 1000px;
  min-height: 340px;
  background-color: #fff;
  box-shadow: 0px 0px 15px #ccc;
  position: absolute;
  top: 0;
  left: 200px;
  z-index: 1000;
  padding: 15px;
}

.nav-detail-item {
  margin-top: 5px;
  margin-bottom: 15px;
  cursor: pointer;
  color: #eee;
}

.nav-detail-item span {
  padding: 6px;
  padding-left: 12px;
  margin-right: 15px;
  font-size: 12px;
  color: #333;
}

.nav-detail-item span:hover {
  background-color: $theme_color;
  color: #fff;
}

.detail-item-panel li {
  line-height: 30px;
}

.detail-item-title {
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  color: #555555;
  padding-right: 10px;
  width: 81px;
  text-align: right;
}

.detail-item-title:hover {
  color: $theme_color;
}

.detail-item-row {
  display: flex;

  > div {
    flex: 1;
  }
}

.detail-item {
  font-size: 12px;
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
  border-left: 1px solid #ccc;

  &:first-child {
    border: none;
    padding-left: 0;
  }
}

.detail-item:hover {
  color: $theme_color;
}
</style>
